<template>
  <h2>欢迎</h2>
  <div class="recommendations">

    <el-carousel height="400px" :interval="5000" indicator-position="outside">
      <el-carousel-item v-for="item in resources" :key="item.resourceId">
        <el-image
            :src="item.imgPath?baseURL+'resource/download/'+item.imgPath:'/fallback.png'"
            fit="cover"
            style="width: 100%; height: 100%"
            @click="router.push('/detail/'+item.resourceId)"
        />
        <div class="carousel-content">
          <div class="carousel-title">{{ item.title }}</div>
          <div class="carousel-description">{{ item.description }}</div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <h2>资源推荐</h2>
    <el-row :gutter="20">
      <el-col :span="6" v-for="course in resources" :key="course.id">
        <ResourceCard :resource="course"></ResourceCard>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {computed, ref} from 'vue'
import ResourceCard from "@/components/ResourceCard.vue";
import api from "@/api/index"
import {useRouter} from "vue-router";

const router = useRouter()
const baseURL = computed(()=>api.getInstance().defaults.baseURL)
const resources = ref([
  // {
  //   resourceId: 1,
  //   title: 'Vue3 入门教程',
  //   description: '学习Vue3的基础知识和核心概念',
  //   imgPath: '/vue3.png',
  //   author: '张老师',
  //   duration: '12小时',
  //   isFavorite: false
  // },
  // {
  //   resourceId: 2,
  //   title: 'Element Plus 实战',
  //   description: '使用Element Plus构建企业级应用',
  //   imgPath: '/ele.png',
  //   author: '李老师',
  //   duration: '8小时',
  //   isFavorite: true
  // },
  // {
  //   resourceId: 3,
  //   title: 'TypeScript 进阶',
  //   description: '深入理解TypeScript的高级特性',
  //   imgPath: '/ts.png',
  //   author: '王老师',
  //   duration: '10小时',
  //   isFavorite: false
  // },
  //
  //   {
  //     resourceId: 4,
  //     title: 'Vue3 深度指南',
  //     description: '全面讲解Vue3核心特性与实践',
  //     imgPath: '/vue1-1.png', // Vue品牌绿
  //     author: '张老师',
  //     duration: '12小时',
  //     isFavorite: false
  //   },
  //   {
  //     resourceId: 5,
  //     title: 'Element Plus 实战(第二章)',
  //     description: '使用Element Plus构建企业级应用',
  //     imgPath: '/ele.png', // Element蓝
  //     author: '李老师',
  //     duration: '8小时',
  //     isFavorite: true
  //   },
  //   {
  //     resourceId: 6,
  //     title: 'TypeScript 进阶',
  //     description: '深入理解TypeScript的高级特性',
  //     imgPath: '/ts.png', // TS深蓝
  //     author: '王老师',
  //     duration: '10小时',
  //     isFavorite: false
  //   },
  //   {
  //     resourceId: 7,
  //     title: 'Vite 快速入门',
  //     description: '掌握Vite构建工具与现代化前端工作流',
  //     imgPath: '/vite.png', // Vite橙
  //     author: '陈老师',
  //     duration: '6小时',
  //     isFavorite: false
  //   },
  //   {
  //     resourceId: 8,
  //     title: 'Pinia 状态管理',
  //     description: '学习使用Pinia进行Vue3应用状态管理',
  //     imgPath: '/pinia.png', // Pinia粉
  //     author: '赵老师',
  //     duration: '9小时',
  //     isFavorite: true
  //   }
])

const fetchRecommendations = () => {
  api.get('resource/recommend').then(res => {
    resources.value = res.data
  })
}
fetchRecommendations()
</script>

<style scoped>
.recommendations {
  padding: 0 15% 50px;
}

h2 {
  color: #a2dd1b;
  margin-bottom: 20px;
}



.course-info h3 {
  margin: 10px 0;
  color: #333;
}

.course-info p {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}

.carousel-content{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background: rgba(0, 0, 0, 0.1);
}

.carousel-title{
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  text-align: left;
}
.carousel-description{
  color: #fff;
  font-size: 16px;
  text-align: left;
}
</style>